<template>
  <div id="history" class="app-container calendar-list-container">
    <div class="filter-container">
      <el-select class="filter-item" v-model="query.groupId" placeholder="全部门站" @change="selectGroupChange">
        <el-option v-for="item in  groups" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
      <el-select class="filter-item" v-model="query.deviceSn" placeholder="全部仪表" @change="selectSNChange">
        <el-option v-for="item in  deviceList" :key="item" :label="item.name" :value="item">
        </el-option>
      </el-select>
      <el-select class="filter-item" v-model="query.fieldName" placeholder="预警内容" >
        <el-option v-for="(key,val,index) in warningContent " :key="index" :label="key" :value="val">
        </el-option>
      </el-select>
      <el-select class="filter-item" v-model="query.state" placeholder="预警状态" >
        <el-option v-for="(key,val,index) in waringState " :key="index" :label="key" :value="val">
        </el-option>
      </el-select>

      <el-date-picker class="filter-item"
        v-model="query.startTime"
        :format="format"
        :value-format="format"
        type="date"
        placeholder="选择起始日期">
      </el-date-picker>

      <el-date-picker class="filter-item"
        v-model="query.endTime" type="date"
        :value-format="format"
        :format="format"
        placeholder="选择终止日期">
      </el-date-picker>
      <el-button class="filter-item btn-ww" type="primary" @click="search">查询 </el-button>
      <el-button class="filter-item btn-ww" type="primary" @click="dialogRSettinigVisible=true">预警设置</el-button>

    </div>
    <el-table class="table-border color-none":data="list" :row-class-name="tableRowClassName" border style="width: 100%" :loading="listLoading">
      <el-table-column type="index"  label="No."></el-table-column>
      <el-table-column prop="name" label="门站名称" align="center" ></el-table-column>
      <el-table-column prop="name" label="仪表" align="center" ></el-table-column>
      <el-table-column prop="name" label="预警内容" align="center" ></el-table-column>
      <el-table-column prop="name" label="预警状态" align="center" ></el-table-column>
      <el-table-column prop="name" label="发生时间" align="center" ></el-table-column>
      <el-table-column prop="name" label="发生地点" align="center" ></el-table-column>
      <el-table-column prop="name" label="操作" align="center"  width="200">
        <template slot-scope="scope">
          <el-button class="btn-ww" type="primary" size="mini" @click="handle(scope)">处理</el-button>
          <el-button class="btn-ww" type="primary" size="mini" @click="record(scope)">记录</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handlePageChange" :current-page.sync="query.pageNumber"
                     :page-size="query.pageSize" layout="total,  prev, pager, next" :total="total">
      </el-pagination>
    </div>
    <el-dialog title="预警处理" :visible.sync="dialogFormVisible">
      <p style="color: white">
        确定已经完成当前预警的处理吗？
      </p>
      <p  style="margin-top: 40px;color: white">
        请输入备注信息
      </p>
      <div>

        <el-input style="transparent"
          type="textarea"
          :rows="2"
          placeholder="请输入备注内容"
          v-model="note">
        </el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confimHandle">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="处理记录" :visible.sync="dialogRecordVisible">
      <div>
        <el-table
          class="table-border color-none"
          :data="recordData"
          border
          style="width: 100%">
          <el-table-column
            prop="name"
            align="center"
            label="预警处理人员"
           >
          </el-table-column>
          <el-table-column
            align="center"
            prop="date"
            label="日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="note"
            align="center"
            label="备注信息"
            width="280">
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
<!--预警设置-->
    <el-dialog title="预警设置" :visible.sync="dialogRSettinigVisible">
      <div>
        <el-row>
          <p class="setting-titile">通讯模块电量(%)</p>
          <p class="setting-content">
            <span class="setting-content-label">最小值</span><el-input-number  :controls="false" :min="0"></el-input-number>
          </p>
        </el-row>
        <el-row>
          <p class="setting-titile">仪表电量（%）</p>
          <p class="setting-content">
            <el-col :span="12">
              <span class="setting-content-label">最小值</span><el-input-number  :controls="false" :min="0"></el-input-number>
            </el-col>
          </p>
        </el-row>
        <el-row>
          <p class="setting-titile">标况瞬时流量（m3/h）</p>
          <p class="setting-content">
            <el-col :span="12">
              <span class="setting-content-label">最小值</span><el-input-number  :controls="false"></el-input-number>
            </el-col>
            <el-col :span="12">
              <span class="setting-content-label">最大值</span><el-input-number  :controls="false"></el-input-number>
            </el-col>
          </p>
        </el-row>
        <el-row>
          <p class="setting-titile">工况瞬时流量（m3/h）</p>
          <p class="setting-content">
            <el-col :span="12">
              <span class="setting-content-label">最小值</span><el-input-number  :controls="false" :min="0"></el-input-number>
            </el-col>
            <el-col :span="12">
              <span class="setting-content-label">最大值</span><el-input-number  :controls="false" :min="0"></el-input-number>
            </el-col>
          </p>
        </el-row>
        <el-row>
          <p class="setting-titile">工况温度（℃）</p>
          <p class="setting-content">
            <el-col :span="12">
              <span class="setting-content-label">最小值</span><el-input-number  :controls="false"></el-input-number>
            </el-col>
            <el-col :span="12">
              <span class="setting-content-label">最大值</span><el-input-number  :controls="false"></el-input-number>
            </el-col>
          </p>
        </el-row>
        <el-row>
          <p class="setting-titile">工况压力（Kpa）</p>
          <p class="setting-content">
            <el-col :span="12">
              <span class="setting-content-label">最小值</span><el-input-number  :controls="false"></el-input-number>
            </el-col>
            <el-col :span="12">
              <span class="setting-content-label">最大值</span><el-input-number  :controls="false"></el-input-number>
            </el-col>
          </p>
        </el-row>
        <el-row>
          <p class="setting-titile">检定时间（h）</p>
          <p class="setting-content">
            <el-col :span="12">
              <span class="setting-content-label">间隔值</span><el-input-number  :controls="false"></el-input-number>
            </el-col>

          </p>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogRSettinigVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveSetting">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  import { fetchList } from '../../api/group'
  import { getDeviceByGroupId } from '../../api/device'
  import { getAlramInfo } from '../../api/alarm'

  import { fromat } from '../../utils/index'
  import { warningContent, waringState } from '../config/index'
  export default {
    name: 'alarm',
    data() {
      return {
        recordData: [{
          name: 'admin001',
          date: '2018-01-01 10:00',
          note: '含调研分析和金品分析内容'
        },
        {
          name: 'admin001',
          date: '2018-01-01 10:00',
          note: '含调研分析和金品分析内容'
        }],
        dialogFormVisible: false,
        dialogRecordVisible: false,
        dialogRSettinigVisible: false,
        date: [],
        groups: [],
        deviceList: [],
        note: '',
        query: {
          groupId: '',
          startTime: '', // yyyy-MM-dd'T'HH:mm:ss.SSSZ
          endTime: '',
          state: '',
          deviceSn: '',
          fieldName: '',
          pageNumber: 1,
          pageSize: 20
        },
        waringState,
        warningContent,
        queryParams: { groupId: '' },
        format: 'yyyy-MM-dd HH:mm:ss',
        total: 0,
        list: [{ name: 'name' }],
        listLoading: false
      }
    },
    methods: {
      saveSetting(){

      },
      confimHandle() {

      },
      handle(item) {
        this.dialogFormVisible = true
      },
      record(item) {
        this.dialogRecordVisible = true
      },
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex % 2 === 0) {
          return 'warning-row'
        }
        return ''
      },
      selectSNChange() {
        this.search()
      },
      selectGroupChange(groupId) {
        this.query.groupId = groupId
        this.queryParams.pageNumber = 1
        this.getDevices()
      },
      getDevices() {
        getDeviceByGroupId(this.query.groupId).then(res => {
          this.deviceList = res.data
        })
      },
      parseTime: fromat,
      handleSizeChange(size) {
        this.query.pageSize = size
        this.getHistoryInfo()
      },
      handlePageChange(page) {
        this.query.pageNumber = page
        this.getHistoryInfo()
      },
      search() {
        if (!this.query.startTime || !this.query.endTime) {
          this.$message.error('起始时间和终止时间不能为空！')
          return
        }
        this.query.pageNumber = 1
        this.query.pageSize = 20
        this.getInfo()
      },
      getGroups() {
        this.listLoading = true
        fetchList().then(data => {
          if (data.data.length === 0) {
            this.$message.error('请先新建门站！')
          }
          this.groups = data.data
          this.query.groupId = this.groups[0] ? this.groups[0].id : ''
          this.getDevices()
          this.listLoading = false
        })
      },
      getInfo() {
        // if (!this.query.deviceSn) {
        //   this.$message.error('sn不能为空')
        //   return
        // }
        this.listLoading = true
        getAlramInfo(this.query).then(response => {
          if (response.data) {
            this.list = response.data.content
            this.total = response.data.totalElements
          }
          this.listLoading = false
        })
      }
    },
    created() {
      this.getGroups()
      const now = new Date()
      this.query.endTime = this.parseTime(now, this.format)
      this.query.startTime = this.parseTime(new Date(now.getTime() - 30 * 24 * 3600 * 1000), this.format)
    },
    mounted() {
    }
  }
</script>

<style scoped>
.setting-titile{
  color: white;
}
.setting-content{
  color: white;
}

.setting-content-label{
  margin-right: 5px;
}
</style>
